React useLayoutEffect: 동기적 DOM 측정 및 업데이트

React는 컴포넌트의 사이드 이펙트(side effect)를 관리하기 위한 강력한 훅(hook)들을 제공합니다. 대부분의 비동기 사이드 이펙트는 useEffect가 주로 처리하지만, 동기적인 DOM 측정 및 업데이트를 수행해야 할 때는 useLayoutEffect가 사용됩니다. 이 가이드에서는 useLayoutEffect의 목적, 사용 사례, 그리고 효과적으로 사용하는 방법을 심도 있게 살펴봅니다.

동기적 DOM 업데이트의 필요성 이해하기

useLayoutEffect의 세부 사항을 살펴보기 전에, 왜 때때로 동기적인 DOM 업데이트가 필요한지 이해하는 것이 중요합니다. 브라우저 렌더링 파이프라인은 다음과 같은 여러 단계로 구성됩니다:

• HTML 파싱: HTML 문서를 DOM 트리로 변환합니다.
• 렌더링: DOM의 각 요소에 대한 스타일과 레이아웃을 계산합니다.
• 페인팅: 요소들을 화면에 그립니다.

React의 useEffect 훅은 브라우저가 화면을 그린 후 비동기적으로 실행됩니다. 이는 메인 스레드를 차단하는 것을 방지하고 브라우저의 반응성을 유지해주기 때문에 일반적으로 성능 면에서 바람직합니다. 하지만, 브라우저가 페인팅하기 전에 DOM을 측정하고 그 측정값을 기반으로 사용자가 초기 렌더링을 보기 전에 DOM을 업데이트해야 하는 상황이 있습니다. 예를 들면 다음과 같습니다:

• 툴팁 내용의 크기와 사용 가능한 화면 공간에 따라 툴팁의 위치를 조정하는 경우.
• 요소가 컨테이너 안에 맞도록 높이를 계산하는 경우.
• 스크롤 또는 리사이즈 중에 요소들의 위치를 동기화하는 경우.

이러한 유형의 작업에 useEffect를 사용하면, 브라우저가 useEffect가 실행되어 DOM을 업데이트하기 전에 초기 상태를 먼저 그리기 때문에 시각적인 깜박임이나 깨짐 현상을 경험할 수 있습니다. 바로 이럴 때 useLayoutEffect가 사용됩니다.

useLayoutEffect 소개

useLayoutEffect는 useEffect와 유사한 React 훅이지만, 브라우저가 모든 DOM 변경을 수행한 후 화면에 그리기(paint) 전에 동기적으로 실행됩니다. 이를 통해 시각적인 깜박임 없이 DOM 측정값을 읽고 DOM을 업데이트할 수 있습니다. 기본 구문은 다음과 같습니다:

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // DOM 변경 후, 페인트 전에 실행할 코드

    // 선택적으로 클린업 함수를 반환
    return () => {
      // 컴포넌트가 언마운트되거나 리렌더링될 때 실행할 코드
    };
  }, [dependencies]);

  return (
    

      {/* 컴포넌트 내용 */}
    
  );
}

useEffect와 마찬가지로 useLayoutEffect는 두 개의 인자를 받습니다:

1. 사이드 이펙트 로직을 포함하는 함수.
2. 선택적인 의존성 배열. 이펙트는 의존성 중 하나가 변경될 때만 다시 실행됩니다. 의존성 배열이 비어 있으면([]), 이펙트는 초기 렌더링 후에 한 번만 실행됩니다. 의존성 배열이 제공되지 않으면, 이펙트는 모든 렌더링 후에 실행됩니다.

언제 useLayoutEffect를 사용해야 하는가

useLayoutEffect를 언제 사용해야 하는지 이해하는 핵심은 브라우저가 페인팅하기 전에 동기적으로 DOM 측정 및 업데이트를 수행해야 하는 상황을 파악하는 것입니다. 일반적인 사용 사례는 다음과 같습니다:

1. 요소 크기 측정

다른 요소의 레이아웃을 계산하기 위해 특정 요소의 너비, 높이 또는 위치를 측정해야 할 수 있습니다. 예를 들어, useLayoutEffect를 사용하여 툴팁이 항상 뷰포트 내에 위치하도록 할 수 있습니다.

import React, { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // 툴팁의 이상적인 위치 계산
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // 툴팁이 뷰포트를 벗어날 경우 위치 조정
      if (left < 0) {
        left = 10; // 왼쪽 가장자리로부터 최소 여백
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // 오른쪽 가장자리로부터 최소 여백
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>툴팁 토글
      {isVisible && (
        

          이것은 툴팁 메시지입니다.
        
      )}
    
  );
}

이 예제에서는 useLayoutEffect를 사용하여 버튼의 위치와 뷰포트 크기를 기반으로 툴팁의 위치를 계산합니다. 이를 통해 툴팁이 항상 보이도록 하고 화면을 벗어나지 않도록 보장합니다. getBoundingClientRect 메서드는 뷰포트를 기준으로 버튼의 크기와 위치를 가져오는 데 사용됩니다.

2. 요소 위치 동기화

사용자가 스크롤할 때 따라오는 스티키 헤더(sticky header)와 같이 한 요소의 위치를 다른 요소와 동기화해야 할 수 있습니다. 이 경우에도 useLayoutEffect를 사용하면 브라우저가 페인팅하기 전에 요소들이 올바르게 정렬되도록 하여 시각적 결함을 피할 수 있습니다.

import React, { useState, useRef, useLayoutEffect } from 'react';

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
스티키 헤더
      
      
{/* 스크롤할 일부 콘텐츠 */}
    
  );
}

이 예제는 사용자가 스크롤할 때 뷰포트 상단에 고정되는 스티키 헤더를 만드는 방법을 보여줍니다. useLayoutEffect는 헤더의 높이를 계산하고 플레이스홀더 요소의 높이를 설정하여 헤더가 고정될 때 콘텐츠가 위로 점프하는 것을 방지하는 데 사용됩니다. offsetTop 속성은 문서에 대한 헤더의 초기 위치를 결정하는 데 사용됩니다.

3. 폰트 로딩 중 텍스트 점프 방지

웹 폰트가 로딩될 때 브라우저는 초기에 대체 폰트(fallback font)를 표시할 수 있으며, 이로 인해 커스텀 폰트가 로드되면 텍스트가 재배치(reflow)될 수 있습니다. useLayoutEffect를 사용하면 대체 폰트로 렌더링된 텍스트의 높이를 계산하고 컨테이너의 최소 높이를 설정하여 이러한 점프 현상을 방지할 수 있습니다.

import React, { useRef, useLayoutEffect, useState } from 'react';

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // 대체 폰트로 높이 측정
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
이것은 커스텀 폰트를 사용하는 텍스트입니다.
    
  );
}

이 예제에서 useLayoutEffect는 대체 폰트를 사용하여 문단 요소의 높이를 측정합니다. 그런 다음 부모 div의 minHeight 스타일 속성을 설정하여 커스텀 폰트가 로드될 때 텍스트가 점프하는 것을 방지합니다. "MyCustomFont"를 실제 커스텀 폰트 이름으로 바꾸세요.

useLayoutEffect vs. useEffect: 주요 차이점

useLayoutEffect와 useEffect의 가장 중요한 차이점은 실행 시점입니다:

• useLayoutEffect: DOM 변경 후, 브라우저가 페인팅하기 전에 동기적으로 실행됩니다. 이는 이펙트 실행이 끝날 때까지 브라우저의 페인팅을 차단합니다.
• useEffect: 브라우저가 화면을 그린 후 비동기적으로 실행됩니다. 이는 브라우저의 페인팅을 차단하지 않습니다.

useLayoutEffect는 브라우저의 페인팅을 차단하므로 드물게 사용해야 합니다. useLayoutEffect를 남용하면, 특히 이펙트에 복잡하거나 시간이 많이 걸리는 계산이 포함된 경우 성능 문제를 유발할 수 있습니다.

주요 차이점을 요약한 표는 다음과 같습니다:

기능	useLayoutEffect	useEffect
실행 시점	동기적 (페인트 전)	비동기적 (페인트 후)
차단 여부	브라우저 페인팅 차단	차단 안 함
사용 사례	동기적 실행이 필요한 DOM 측정 및 업데이트	대부분의 다른 사이드 이펙트 (API 호출, 타이머 등)
성능 영향	잠재적으로 더 높음 (차단으로 인해)	더 낮음

useLayoutEffect 사용을 위한 모범 사례

useLayoutEffect를 효과적으로 사용하고 성능 문제를 피하려면 다음 모범 사례를 따르세요:

1. 드물게 사용하기

동기적인 DOM 측정 및 업데이트가 반드시 필요한 경우에만 useLayoutEffect를 사용하세요. 대부분의 다른 사이드 이펙트에는 useEffect가 더 나은 선택입니다.

2. 이펙트 함수를 짧고 효율적으로 유지하기

useLayoutEffect의 이펙트 함수는 차단 시간을 최소화하기 위해 가능한 한 짧고 효율적이어야 합니다. 이펙트 함수 내에서 복잡한 계산이나 시간이 많이 걸리는 작업을 피하세요.

3. 의존성을 현명하게 사용하기

항상 useLayoutEffect에 의존성 배열을 제공하세요. 이렇게 하면 이펙트가 필요할 때만 다시 실행됩니다. 의존성 배열에 어떤 변수를 포함해야 할지 신중하게 고려하세요. 불필요한 의존성을 포함하면 불필요한 리렌더링과 성능 문제를 유발할 수 있습니다.

4. 무한 루프 피하기

useLayoutEffect 내에서 이펙트의 의존성이기도 한 상태 변수를 업데이트하여 무한 루프를 만들지 않도록 주의하세요. 이는 이펙트가 반복적으로 다시 실행되어 브라우저가 멈추는 원인이 될 수 있습니다. DOM 측정값을 기반으로 상태 변수를 업데이트해야 하는 경우, ref를 사용하여 측정된 값을 저장하고 상태를 업데이트하기 전에 이전 값과 비교하는 것을 고려하세요.

5. 대안 고려하기

useLayoutEffect를 사용하기 전에 동기적인 DOM 업데이트가 필요 없는 대안적인 해결책이 있는지 고려해 보세요. 예를 들어, 자바스크립트 개입 없이 CSS를 사용하여 원하는 레이아웃을 달성할 수 있습니다. CSS 트랜지션 및 애니메이션 또한 useLayoutEffect 없이 부드러운 시각 효과를 제공할 수 있습니다.

useLayoutEffect와 서버 사이드 렌더링(SSR)

useLayoutEffect는 브라우저의 DOM에 의존하므로 서버 사이드 렌더링(SSR) 중에 사용하면 경고가 발생합니다. 이는 서버에는 DOM이 없기 때문입니다. 이 경고를 피하려면 조건부 검사를 사용하여 useLayoutEffect가 클라이언트 측에서만 실행되도록 할 수 있습니다.

import React, { useLayoutEffect, useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // DOM에 의존하는 코드
      console.log('useLayoutEffect가 클라이언트에서 실행 중');
    }
  }, [isClient]);

  return (
    

      {/* 컴포넌트 내용 */}
    
  );
}

이 예제에서는 useEffect 훅을 사용하여 컴포넌트가 클라이언트 측에 마운트된 후 isClient 상태 변수를 true로 설정합니다. 그러면 useLayoutEffect 훅은 isClient가 true일 때만 실행되어 서버에서 실행되는 것을 방지합니다.

또 다른 접근 방식은 SSR 중에는 useEffect로 대체되는 커스텀 훅을 사용하는 것입니다:

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

그런 다음, useLayoutEffect나 useEffect를 직접 사용하는 대신 useIsomorphicLayoutEffect를 사용할 수 있습니다. 이 커스텀 훅은 코드가 브라우저 환경(즉, typeof window !== 'undefined')에서 실행 중인지 확인합니다. 만약 그렇다면 useLayoutEffect를 사용하고, 그렇지 않다면 useEffect를 사용합니다. 이렇게 하면 SSR 중 경고를 피하면서도 클라이언트 측에서는 useLayoutEffect의 동기적 동작을 활용할 수 있습니다.

전역적 고려사항 및 예시

전 세계 사용자를 대상으로 하는 애플리케이션에서 useLayoutEffect를 사용할 때 다음 사항을 고려해야 합니다:

• 다양한 폰트 렌더링: 폰트 렌더링은 운영 체제와 브라우저마다 다를 수 있습니다. 레이아웃 조정이 여러 플랫폼에서 일관되게 작동하는지 확인하세요. 다양한 기기와 운영 체제에서 애플리케이션을 테스트하여 불일치 사항을 찾아 해결하는 것을 고려하세요.
• 오른쪽에서 왼쪽으로 쓰는(RTL) 언어: 애플리케이션이 RTL 언어(예: 아랍어, 히브리어)를 지원하는 경우, DOM 측정 및 업데이트가 RTL 모드의 레이아웃에 어떤 영향을 미치는지 유의해야 합니다. 물리적 속성(예: margin-left, margin-right) 대신 CSS 논리적 속성(예: margin-inline-start, margin-inline-end)을 사용하여 적절한 레이아웃 적응을 보장하세요.
• 국제화(i18n): 텍스트 길이는 언어마다 크게 다를 수 있습니다. 텍스트 내용을 기반으로 레이아웃을 조정할 때 다른 언어에서 더 길거나 짧은 텍스트 문자열의 가능성을 고려하세요. 유연한 레이아웃 기술(예: CSS flexbox, grid)을 사용하여 다양한 텍스트 길이를 수용하세요.
• 접근성(a11y): 레이아웃 조정이 접근성에 부정적인 영향을 미치지 않도록 하세요. 자바스크립트가 비활성화되었거나 사용자가 보조 기술을 사용하는 경우 콘텐츠에 접근할 수 있는 대체 방법을 제공하세요. ARIA 속성을 사용하여 레이아웃 조정의 구조와 목적에 대한 의미론적 정보를 제공하세요.

예시: 다국어 환경에서의 동적 콘텐츠 로딩 및 레이아웃 조정

다양한 언어로 기사를 동적으로 로드하는 뉴스 웹사이트를 상상해 보세요. 각 기사의 레이아웃은 콘텐츠의 길이와 사용자가 선호하는 폰트 설정에 따라 조정되어야 합니다. 이 시나리오에서 useLayoutEffect를 사용하는 방법은 다음과 같습니다:

1. 기사 내용 측정: 기사 내용이 로드되고 렌더링된 후(그러나 표시되기 전) useLayoutEffect를 사용하여 기사 컨테이너의 높이를 측정합니다.
2. 사용 가능한 공간 계산: 헤더, 푸터 및 기타 UI 요소를 고려하여 화면에서 기사에 사용할 수 있는 공간을 결정합니다.
3. 레이아웃 조정: 기사의 높이와 사용 가능한 공간을 기반으로 최적의 가독성을 보장하도록 레이아웃을 조정합니다. 예를 들어, 폰트 크기, 줄 간격 또는 열 너비를 조정할 수 있습니다.
4. 언어별 조정 적용: 기사가 더 긴 텍스트 문자열을 가진 언어인 경우, 증가된 텍스트 길이를 수용하기 위해 추가적인 조정이 필요할 수 있습니다.

이 시나리오에서 useLayoutEffect를 사용하면 사용자가 보기 전에 기사 레이아웃이 올바르게 조정되도록 보장하여 시각적 결함을 방지하고 더 나은 읽기 경험을 제공할 수 있습니다.

결론

useLayoutEffect는 React에서 동기적인 DOM 측정 및 업데이트를 수행하기 위한 강력한 훅입니다. 그러나 잠재적인 성능 영향 때문에 신중하게 사용해야 합니다. useLayoutEffect와 useEffect의 차이점을 이해하고, 모범 사례를 따르며, 전역적인 영향을 고려함으로써 useLayoutEffect를 활용하여 부드럽고 시각적으로 매력적인 사용자 인터페이스를 만들 수 있습니다.

useLayoutEffect를 사용할 때는 성능과 접근성을 우선시해야 합니다. 항상 동기적인 DOM 업데이트가 필요 없는 대안적인 해결책을 고려하고, 전 세계 사용자에게 일관되고 즐거운 사용자 경험을 보장하기 위해 다양한 기기와 브라우저에서 애플리케이션을 철저히 테스트하세요.